<template>
  <div class="cardCollageChooseCarmi">
    <el-card shadow="hover">
      <el-form ref="queryFormRef" :model="queryCarmiParams">
        <el-row :gutter="20">
          <el-col :span="15">
            <el-form-item prop="cardName" >
              <el-input v-model="queryCarmiParams.luckBoxName" :rows="2" maxlength="50" show-word-limit clearable
                placeholder="输入卡密的名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="系统福盒" prop="isSystem">
              <el-select v-model="queryCarmiParams.isSystem" placeholder="请选择" clearable >
                <el-option v-for="dict in sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜 索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div style="margin-top: 10px;">
      <el-tabs v-model="queryCarmiParams.cardType" type="card" @tab-change="handleQuery">
        <el-tab-pane label="全部" name=''></el-tab-pane>
        <el-tab-pane v-for="(dict, index) in card_type" :key="index" :label="dict.label"
                     :name="dict.value"></el-tab-pane>
      </el-tabs>
    </div>
    <div>
      <el-table v-loading="loading" :data="data.cardMiNameList" max-height="600px" border >
        <el-table-column type="index" width="60" align="center" label="序号"></el-table-column>
        <el-table-column prop="luckBoxName" align="center" label="福盒名"></el-table-column>
        <el-table-column label="类别" align="center" prop="cardType" width="100">
          <template #default="scope">
            <dict-tag :options="card_type" :value="scope.row.cardType"/>
          </template>
        </el-table-column>
        <el-table-column prop="boxCount" align="center" label="数量" width="100"></el-table-column>
        <el-table-column label="系统福盒" align="center" prop="isSystem" width="100">
          <template #default="scope">
            <dict-tag :options="sys_yes_no" :value="scope.row.isSystem"/>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template #default="scope">
            <el-link type="primary" :underline="false" style="margin-right: 30px;"
              @click="handleSubmit(scope.row)">选择</el-link>
            <el-link type="primary" :underline="false" @click="handlePreview(scope.row)">预览</el-link>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" v-model:page="queryCarmiParams.pageNum"
                  v-model:limit="queryCarmiParams.pageSize" @pagination="getList" />
    </div>
    <div class="footerButton" style="margin-top: 30px">
      <el-button @click="cancle">取 消</el-button>
    </div>
  </div>

  <el-dialog title="预览卡密" v-model="previewDiaLog.visible" width="500px" append-to-body top="3vh" destroy-on-close>
    <div>
      <el-table v-loading="carmiLoading" :data="data.carmiInfoPreview" height="450px" border>
        <el-table-column type="index" width="60" align="center" label="序号"></el-table-column>
        <el-table-column prop="luckBoxCarmi" align="center" label="卡密信息"></el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>
<script lang=ts setup>
import { ref, reactive, toRefs, watch } from 'vue'
import { queryCardCaCtegoryBySeries, queryCardCaCtegoryType, queryCardCategoryByName, previewCard } from '@/api/workflow/category/index'
import { CardCollageVO } from '@/api/workflow/cardCollage/types';
import { CardCategorySeriesVo } from '@/api/workflow/category/types';
import { listBox, getBox, delBox, addBox, updateBox, updateLuckBoxStatus } from '@/api/system/box';
import { BoxVO, BoxQuery, BoxForm } from '@/api/system/box/types';
import { get } from '@vueuse/core';
const loading = ref(true);
const carmiLoading = ref(true);
const total = ref(0);
const cardCategorySeriesList = ref<CardCategorySeriesVo[]>([]);
const luckBoxList = ref<BoxVO[]>([]);
const { proxy } = getCurrentInstance()
const { sys_yes_no, card_type, open_or_close } = toRefs<any>(proxy?.useDict('sys_yes_no', 'card_type', 'open_or_close'));
const isQuery = ref(false)
const previewCardId = ref()
const data = reactive({
  form: {
    selectedItemId: undefined,
  },
  queryCarmiParams: {
    pageNum: 1,
    pageSize: 10,
    luckBoxName: '',
    isSystem: undefined,
    cardType: '',
  },
  queryCarmiInfoParams: {
    pageNum: 1,
    pageSize: 10,
    name: undefined,
    id: undefined,
  },
  rules: {
    selectedItemId: [{ required: true, message: '请选择卡密', trigger: 'blur' }],
  },
  results: [], // 用于存储接口返回的数据
  selectedItem: {},
  cardMiNameList: [],
  carmiInfoPreview: [],
})
const { form, queryCarmiParams,queryCarmiInfoParams, rules } = toRefs(data)
const previewDiaLog = reactive<DialogOption>({
  visible: false,
  title: '预览卡密'
});
const categoryFormRef = ref()

const props = defineProps({
  cardCategoryId: {
    type: [String, Number],
    default: undefined,
  },
})
const emit = defineEmits(['close', 'submit'])

/** 搜索按钮操作 */
const handleQuery = () => {
  console.log(queryCarmiParams.value.cardType)
  getList();
}

const getListByName = async () => {
  // const query = {
  //   cardName: queryCarmiParams.value.cardName
  // }
  loading.value = true;
  isQuery.value = true;
  const res = await queryCardCategoryByName(queryCarmiParams.value);
  total.value = res.total;
  data.cardMiNameList = res.rows;
  loading.value = false;
}

const preview = async () => {
    carmiLoading.value = true;
    const res = await getBox(previewCardId.value);
    data.carmiInfoPreview = res.data.luckBoxDetailsBos;
    carmiLoading.value = false;
}

const getList = async () => {
    loading.value = true;
    const res = await listBox(queryCarmiParams.value);
    total.value = res.total;
    data.cardMiNameList = res.rows;
    loading.value = false;
}

const getSecond = async (id?: string | number) => {
  const query = {
    series: id
  }
  const res = await queryCardCaCtegoryType(query);
  const data = res.rows.map((item: any) => {
    return {
      ...item,
      leaf: false,
      label: item.cardSubseries,
    }
  })
  return data;
}

const handleSpanClick = () => {
  isQuery.value = false;
}

const getThird = async (series?: string | number, subSeries?: string | number) => {
  let query = {
    series: series,
    subSeries: subSeries,
    pageSize: -1,
    pageNum: -1,
  }

  let res = await queryCardCategoryByName(query)
  let data = res.rows.map((item: any) => {
    return {
      ...item,
      label: item.cardName,
      leaf: true,
    }
  })
  return data
}

watch(() => props.cardCategoryId, (val) => {
  getList()
}, {
  deep: true,
  immediate: true,
})

const loadNode = async (node: any, resolve: any) => {
  if (node.level === 0) {
    return resolve(cardCategorySeriesList.value)
  }
  if (node.level === 1) {
    let res = await getSecond(node.data.cardSeries)
    return resolve(res)
  }
  if (node.level === 2) {
    let res = await getThird(node.data.cardSeries, node.data.cardSubseries)
    return resolve(res)
  }
}

const cancle = () => {
  emit('close')
}
const handleSubmit = (node: any) => {
  emit('submit', node)
}
const handlePreview = async (node: any) => {
  previewCardId.value = node.id;
  await preview();
  previewDiaLog.visible = true;
  previewDiaLog.title = "预览卡密";
}
</script>
<style lang="scss" scoped>
::v-deep(.el-scrollbar .el-scrollbar__wrap) {
  overflow-x: hidden;
}

::v-deep(.el-scrollbar__bar.is-horizontal) {
  display: none;
}

.footerButton {
  display: flex;
  justify-content: center;
  align-self: center;
  text-align: center;
}
</style>
